<!--
 * @Descripttion: 登录页
 * @version: 
 * @Author: Bruce
 * @Date: 2020-11-02 14:25:22
 * @LastEditors: Bruce
 * @LastEditTime: 2020-11-18 17:32:56
-->


<template>
	<div class="login">
		<el-dialog :visible="true" width="30%" :show-close="false">

			<div class="title">
				<p>安顺职业技术学院</p>
				<p>考证在线报名收费系统</p>
			</div>

			<el-divider class="divider">登录方式</el-divider>

			<div class="wechatLogin">
				<el-image style="width: 40px; height: 40px;cursor: pointer;" :src="loginTypeUrl" fit="contain" @click="wxlogin"></el-image>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import { APP_ID, BASE_URL} from "@/utils/common.js"
	export default {
		data() {
			return {
				loginTypeUrl: require("@/assets/wechat.png")
			}
		},
		methods: {
			wxlogin() {
				this.wxLogin(
					APP_ID,
					BASE_URL +"pcWxlogin"
				);
			},
			wxLogin(appid, url) {
				const redirectUri = encodeURIComponent(url);
				window.location.href =
					`https://open.weixin.qq.com/connect/qrconnect?appid=${appid}&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_login&state=#wechat_redirect`;
			},
		}
	};
</script>

<style lang="scss" scoped>
	.title{
		p{
			text-align: center;
			font-size: 30px;
		}
	}
	.divider {
		//分割线
		/deep/.el-divider__text {
			border: 1px solid #DCDFE6;
			border-radius: 10px;
		}
	}
	
	.wechatLogin{
		display: flex;
		justify-content: center;
	}
</style>
